import React, {Component} from 'react';
import axios from 'axios'

class Index extends Component {
    search = () => {
        const {keyWordElement: {value: keyWord}} = this
        this.props.updateAppState({
            isFirst: false,
            isLoading: true
        })
        axios.get(`https://api.github.com/search/users?q=${keyWord}`).then(
            response => {
                this.props.updateAppState({
                    users: response.data.items,
                    isLoading: false
                })
            },
            error => {
                this.props.updateAppState({
                    isLoading: false,
                    err: error.message
                })
            }
        )
    }

    render() {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">搜索 Github 用户</h3>
                <div>
                    <input ref={c => this.keyWordElement = c} type="text" placeholder="输入关键词点击搜索"/>&nbsp;
                    <button onClick={this.search}>搜索</button>
                </div>
            </section>
        );
    }
}

export default Index;